<template>
  <div class="app-container">
    <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
      label-width="120px">
      <h2 style="text-align: center">车辆档案</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="车牌号" prop="licenseNum">
            <el-input v-model="formData.licenseNum" placeholder="请输入车牌号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品牌类型" prop="brand">
            <el-input v-model="formData.brand" placeholder="请输入品牌类型" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆状态" prop="carStatusValue">
            <el-select filterable v-model="formData.carStatusValue" placeholder="请选择车辆状态" clearable
              :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_car_status" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="驾驶证" prop="driverTypeValue">
            <el-select filterable v-model="formData.driverTypeValue" placeholder="驾驶证" clearable
              :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_driver_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆类型" prop="carTypeValue">
            <el-select filterable v-model="formData.carTypeValue" placeholder="请选择车辆类型" clearable
              :style="{ width: '100%' }">
             
              <el-option v-for="dict in dict.type.sys_car_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="驾驶员" prop="driverId">
            <el-select filterable v-model="formData.driverId" placeholder="请选择驾驶员" clearable @change="changeUser"
              :style="{ width: '100%' }">
              <el-option v-for="dict in driverSelectList" :key="dict.driverId" :label="dict.nickName"
                :value="dict.driverId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买日期" prop="buyDate">
            <el-date-picker v-model="formData.buyDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择购买日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买金额" prop="buyMoney">
            <el-input-number :style="{ width: '100%' }" v-model="formData.buyMoney" placeholder="购买金额" :step="1"
              controls-position="right">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发动机号" prop="transmitterNumber">
            <el-input v-model="formData.transmitterNumber" placeholder="请输入发动机号" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号" prop="frameNo">
            <el-input v-model="formData.frameNo" placeholder="请输入车架号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="公开使用" prop="effectStatusValue">
            <el-select v-model="formData.effectStatusValue" placeholder="请选择公开使用" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_effect_status" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片" prop="image">
            <imageUpload :limit="1" :disabled="$route.query.isInfo" :fileType="['png', 'jpg', 'jpeg', 'PDF', 'pdf']"
              v-model="formData.image" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入多行文本备注" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <h4 class="form-header h4">保险及年审信息</h4>
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="经办人" prop="carInfoBo.userName">
            <el-input v-model="formData.carInfoBo.userName" placeholder="请输入单行文本经办人" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保险费用" prop="carInfoBo.fee">
            <el-input-number :style="{ width: '100%' }" v-model="formData.carInfoBo.fee" placeholder="保险费用" :step="1"
              controls-position="right">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人" prop="carInfoBo.person">
            <el-input v-model="formData.carInfoBo.person" placeholder="请输入联系人" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="carInfoBo.phone">
            <el-input v-model="formData.carInfoBo.phone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投保日期" prop="carInfoBo.startDate">
            <el-date-picker v-model="formData.carInfoBo.startDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择投保日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束日期" prop="carInfoBo.endDate">
            <el-date-picker v-model="formData.carInfoBo.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择结束日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="注册日期" prop="carInfoBo.yearCheckDate">
            <el-date-picker v-model="formData.carInfoBo.yearCheckDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择注册日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="年检日期" prop="carInfoBo.yearCheckDate">
            <el-date-picker v-model="formData.carInfoBo.yearCheckDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择年检日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下次年检日期" prop="carInfoBo.nextYearCheckDate">
            <el-date-picker v-model="formData.carInfoBo.nextYearCheckDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择下次年检日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保养日期" prop="carInfoBo.careDate">
            <el-date-picker v-model="formData.carInfoBo.careDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择保养日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下次保养日期" prop="carInfoBo.nextCareDate">
            <el-date-picker v-model="formData.carInfoBo.nextCareDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择下次保养日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年审日期" prop="carInfoBo.yearAuditDate">
            <el-date-picker v-model="formData.carInfoBo.yearAuditDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择年审日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下次年审日期" prop="carInfoBo.nextYearAuditDate">
            <el-date-picker v-model="formData.carInfoBo.nextYearAuditDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择下次年审日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运营年检日期" prop="carInfoBo.busYearCheckDate">
            <el-date-picker v-model="formData.carInfoBo.busYearCheckDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择运营年检日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下次运营年检日期" prop="carInfoBo.nextBusYearCheckDate">
            <el-date-picker v-model="formData.carInfoBo.nextBusYearCheckDate" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" :style="{ width: '100%' }" placeholder="请选择下次运营年检日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保险公司" prop="carInfoBo.careCompany">
            <el-input v-model="formData.carInfoBo.careCompany" placeholder="请输入保险公司" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
      <h4 class="form-header h4">附件</h4>

      <el-form-item label="" prop="oss">
        <FileUploadBase :isDelete="!$route.query.isInfo" v-model="formData.oss"></FileUploadBase>
      </el-form-item>

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { carAdd, updategcar, carInfo } from "@/api/car/car.js";

import { selectList as driverSelect } from "@/api/car/driver.js";

export default {
  dicts: ["sys_car_status", "sys_driver_type", "sys_effect_status","sys_car_type"],

  components: {},
  props: [],
  data() {
    return {
      formData: {
        licenseNum: undefined,
        brand: undefined,
        carStatusValue: undefined,
        driverTypeValue: undefined,
        carTypeValue:undefined,
        driverId: undefined,
        buyDate: null,
        buyMoney: undefined,
        transmitterNumber: undefined,
        frameNo: undefined,
        effectStatusValue: undefined,
        carInfoBo: {
          userName: undefined,
          fee: undefined,
          person: undefined,
          phone: undefined,
          startDate: null,
          endDate: null,
          yearCheckDate: null,
          nextYearCheckDate: null,
          careDate: null,
          nextCareDate: null,
          yearAuditDate: null,
          nextYearAuditDate: null,
          busYearCheckDate: null,
          nextBusYearCheckDate: null,
          careCompany: undefined,
        },
      },
      rules: {
        carInfoBo: {
          userName: [
            {
              required: true,
              message: "请输入单行文本经办人",
              trigger: "blur",
            },
          ],
          fee: [
            {
              required: true,
              message: "保险费用",
              trigger: "blur",
            },
          ],
          person: [
            {
              required: true,
              message: "请输入联系人",
              trigger: "blur",
            },
          ],
          phone: [
            {
              required: true,
              message: "请输入联系电话",
              trigger: "blur",
            },
          ],
          startDate: [
            {
              required: true,
              message: "请选择投保日期",
              trigger: "change",
            },
          ],
          endDate: [
            {
              required: true,
              message: "请选择结束日期",
              trigger: "change",
            },
          ],
          yearCheckDate: [
            {
              required: true,
              message: "请选择年检日期",
              trigger: "change",
            },
          ],
          nextYearCheckDate: [
            {
              required: true,
              message: "请选择下次年检日期",
              trigger: "change",
            },
          ],
          careDate: [
            {
              required: true,
              message: "请选择保养日期",
              trigger: "change",
            },
          ],
          nextCareDate: [
            {
              required: true,
              message: "请选择下次保养日期",
              trigger: "change",
            },
          ],
          yearAuditDate: [
            {
              required: true,
              message: "请选择年审日期",
              trigger: "change",
            },
          ],
          nextYearAuditDate: [
            {
              required: true,
              message: "请选择下次年审日期",
              trigger: "change",
            },
          ],
          busYearCheckDate: [
            {
              required: true,
              message: "请选择运营年检日期",
              trigger: "change",
            },
          ],
          nextBusYearCheckDate: [
            {
              required: true,
              message: "请选择下次运营年检日期",
              trigger: "change",
            },
          ],
          careCompany: [
            {
              required: true,
              message: "请输入保险公司",
              trigger: "blur",
            },
          ],
        },
        licenseNum: [
          {
            required: true,
            message: "请输入车牌号",
            trigger: "blur",
          },
        ],
        brand: [
          {
            required: true,
            message: "请输入品牌类型",
            trigger: "blur",
          },
        ],
        carStatusValue: [
          {
            required: true,
            message: "请选择车辆状态",
            trigger: "change",
          },
        ],
        driverTypeValue: [
          {
            required: true,
            message: "请选择驾驶证",
            trigger: "change",
          },
        ],
        carTypeValue:[
          {
            required: true,
            message: "请选择车辆类型",
            trigger: "change",
          },
        ],
        driverId: [
          {
            required: true,
            message: "请输入驾驶员",
            trigger: "blur",
          },
        ],
        buyDate: [
          {
            required: true,
            message: "请选择购买日期",
            trigger: "change",
          },
        ],
        buyMoney: [
          {
            required: true,
            message: "购买金额",
            trigger: "blur",
          },
        ],
        transmitterNumber: [
          {
            required: true,
            message: "请输入发动机号",
            trigger: "blur",
          },
        ],
        frameNo: [
          {
            required: true,
            message: "请输入车架号",
            trigger: "blur",
          },
        ],
        effectStatusValue: [
          {
            required: true,
            message: "请选择公开使用",
            trigger: "change",
          },
        ],
        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change",
          },
        ],
        image: [
          {
            required: false,
            message: "图片不能为空",
            trigger: "change",
          },
        ],
      },
      driverSelectList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.driverSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() { },
  methods: {
    driverSelect() {
      driverSelect().then((response) => {
        this.driverSelectList = response.data;
      });
    },
    changeUser(e) {
      console.log(e);
    },

    getinfo() {
      carInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
    },

    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.effectStatusLabel = this.dict.type.sys_effect_status.find(
            (i) => i.value == query.effectStatusValue
          ).label;
          query.carStatusLabel = this.dict.type.sys_car_status.find(
            (i) => i.value == query.carStatusValue
          ).label;
          query.driverTypeName = this.dict.type.sys_driver_type.find(
            (i) => i.value == query.driverTypeValue
          ).label;
          query.carTypeName = this.dict.type.sys_car_type.find(
            (i) => i.value == query.carTypeValue
          ).label;
          query.nickName = this.driverSelectList.find(
            (i) => i.driverId == query.driverId
          ).nickName;

          if (this.formData.carId != undefined) {
            updategcar(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            carAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./file" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
